﻿<!DOCTYPE html>
<html lang="en" prefix="og: http://ogp.me/ns#">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="description" content="Create LR(1) parsers in your browser and see how they work.">
  <meta name="keywords" content="parser,lr parser,lr(1) parser,canonical lr parser">
  <meta property="og:title" content="LR(1) Parser Vis">
  <meta property="og:description" content="Create LR(1) parsers in your browser and see how they work.">
  <meta property="og:type" content="website">
  <meta property="og:image" content="images/sample-parse-table.jpg">
  <meta property="og:url" content="https://soroushj.github.io/lr1-parser-vis/">
  <title>LR(1) Parser Vis</title>
  <link rel="shortcut icon" href="images/favicon.ico">
</head>

<body>
  <header>
    <h1>LR(1) Parser Vis</h1>
    <p>Create LR(1) parsers in your browser and see how they work.</p>
  </header>
  <main>
    <section>
      <h2>Grammar</h2>
      <p>How to write the grammar:</p>
      <ul>
        <li>The first symbol must be the start symbol;</li>
        <li>Separate symbols with a space;</li>
        <li>Write only one rule per line&mdash;no bars;</li>
        <li>Do not use arrows&mdash;use a space; and</li>
        <li>Do not write an end marker.</li>
      </ul>
      <textarea id="grammar-text" placeholder="grammar"></textarea>
      <p>
        <button type="button" id="create-parser">Create Parser</button>
        <button type="button" id="show-example">Show an Example</button>
        <button type="reset" id="clear">Clear</button>
      </p>
      <div id="grammar-container" class="container code-container"></div>
    </section>
    <section>
      <h3>Collection</h3>
      <div id="collection-container" class="container code-container"></div>
    </section>
    <section>
      <h3>Parse Table</h3>
      <div id="parse-table-container" class="container table-container"></div>
    </section>
    <section>
      <h2>Parsing</h2>
      <p>How to write the input:</p>
      <ul>
        <li>Separate symbols with a space; and</li>
        <li>Do not write an end marker.</li>
      </ul>
      <textarea id="input-text" placeholder="input"></textarea>
      <p>
        <button type="button" id="parse">Parse</button>
      </p>
    </section>
    <section>
      <h3>Parse Steps</h3>
      <div id="parse-steps-container" class="container table-container"></div>
    </section>
    <section>
      <h3>Parse Tree</h3>
      <div id="parse-tree-container" class="container tree-container"></div>
    </section>
  </main>
  <footer>
    <p>
      <a href="https://github.com/soroushj/lr1-parser-vis">LR(1) Parser Vis</a> &copy; 2017
      <a href="https://github.com/soroushj">Soroush Javadi</a>. Available under the
      <a href="https://github.com/soroushj/lr1-parser-vis/blob/master/LICENSE">MIT License</a>.
    </p>
  </footer>
  <script src="./scripts/index.js"></script>
</body>

</html>
